<template>
  <div class="layout">
    <Row type="flex">
      <i-col :span="4" class="menu-warp">
        <Menu
          class="layout-menu-left"
          theme="light"
          width="auto"
          @on-select="jump"
          :active-name="active_path"
          :open-names="active_open"
        >
          <div class="layout-logo-left">
            <h3>
              <img class="app-logo" src="../../assets/logo.png" />
              <span class="app-logo-title">康复中心</span>排班系统
            </h3>
            <Divider class="app-logo-divider" />
            <div class="app-avator">
              <Avatar class="avator-img" size="large" src="avator.png"/> 
              <div class="avator-titles">
                <span class="main-title">管理员</span>
                <span class="sub-title">Online</span>
              </div>
            </div>
            <div style="color:#ddd;font-size:12px;padding-left:14%;margin-top:34px;">HEADER</div>
          </div>
          <template v-for="(menu,key) in menutree">
            <MenuItem v-if="(typeof menu.children === 'undefined')" :key="key" :name="menu.path">
              <Icon :type="menu.icon" :size="16" />
              <span class="menu-title">{{menu.title}}</span>
            </MenuItem>
            <Submenu v-else :name="menu.title" :key="key">
              <template slot="title">
                <Icon :type="menu.icon" :size="16" />
                <span class="menu-title">{{menu.title}}</span>
              </template>
              <Menu-item v-for="(item,k) in menu.children" :name="item.path" :key="k">
                <Icon :type="item.icon" :size="16" />
                <span class="menu-title">{{item.title}}</span>
              </Menu-item>
            </Submenu>
          </template>
        </Menu>
      </i-col>
      <i-col :span="20" class="content-warp">
        <div class="layout-header">
          <!-- header icon -->
          <h2>{{ page_title }}</h2>
          <div class="head-right">
            <fullscreen v-model="isFullscreen" style="margin-right: 10px;display:inline-block;"/>
            <user style="display:inline-block;"/>
          </div>
        </div>
        <router-view />
        <div class="layout-copy">技术支持 黑龙江正则科技开发有限公司 服务热线：0451-87179508</div>
      </i-col>
    </Row>
  </div>
</template>
<script>
import Fullscreen from '../../components/fullscreen'
import User from '../../components/user'
export default {
  data() {
    return {
      isFullscreen: false,
      active_path:'/',
      active_open:[],
      page_title: "",
      menutree: [
        {
          title: "首页",
          path: "/",
          icon:'ios-home'
        },
        {
          title: "医生管理",
          path: "/doctors",
          icon:'ios-contacts'
        },
        {
          title: "患者管理",
          path: "/suffers",
          icon:'ios-people'
        },
        {
          title: "治疗师管理",
          icon:'md-medkit',
          children: [
            {
              title: "治疗师列表",
              path: "/treatments/treatmentslist",
              icon:'md-radio-button-off',
            },
            {
              title: "治疗师类别",
              path: "/treatments",
              icon:'md-radio-button-off',
            }
          ]
        },
        {
          title: "治疗项目管理",
          icon:'md-heart',
          children: [
            {
              title: "治疗项目列表",
              path: "/treatmentsproject/projectlist",
              icon: 'md-radio-button-off'
            },
            {
              title: "治疗项目类别",
              path: "/treatmentsproject",
              icon: 'md-radio-button-off'
            }
          ]
        }
      ]
    };
  },
  components:{
    Fullscreen,
    User
  },
  created() {
    // 获取路由 title
    this.page_title = this.$route.meta.title;
    // 获取路由 path
    this.active_path = this.$route.fullPath;
    if(this.active_path.indexOf('/treatmentsproject')>-1){
      this.active_open = ["治疗项目管理"];
    }else if(this.active_path.indexOf('/treatments')>-1){
      this.active_open = ["治疗师管理"];
    }else{
      this.active_open = []
    }
  },
  methods: {
    // 跳转
    jump(url) {
      this.active_path = url;
      this.$router.push({ path: url });
    },
  },
  watch: {
    // 见识路由变化
    $route(to) {
      this.page_title = to.meta.title;
    }
  }
};
</script>
<style scoped lang="less">
.menu-warp{
  width:230px;
}
.content-warp{
  width:calc(100% - 230px);
}
h2   {
  line-height: 60px;
  margin-left: 35px;
  font-weight: 550px;
  display: inline-block;
}
.head-right {
  height: 60px;
  line-height: 60px;
  float: right;
  margin-right:30px;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  height: calc(100vh - 1px);
}
.layout-breadcrumb {
  padding: 10px 15px 0;
}
.layout-content-main {
  padding: 10px;
}
.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
}
.layout-menu-left {
  height: calc(100vh - 1px);
  box-sizing: border-box;
  padding-top: 15px;
}
.layout-header {
  height: 60px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.layout-logo-left {
  width: 100%;
  height: 30px;
  border-radius: 3px;
  margin: auto;
  margin-top:4px;
  margin-bottom:140px;
  h3{
    width:220px;
    margin:0 auto;
  }
}
.ivu-icon{
  margin-top:-5px;
  color:#B9BBC6;
} 
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after{
  width: 6px;
  background-color:#278BED; 
}
.app-logo{
  /* display:inline; */
  width:25px;
  height:25px;
  float:left;
  margin-left:12%;
  margin-top:-2px;
  margin-right:8px;
}
.app-logo-title{
  color:#278BED;
}
.app-avator{
  margin-left:14%;
  display:inline-block;
  .avator-img{
    float: left;
    margin-right:10px;
  }
  .avator-titles{
    display: inline-block;
    span{
      display: block;
    }
    .main-title{
      font-size: 14px;
      color:#676B74;
    }
    .sub-title{
      font-size: 12px;
      color:#989CA5;
    }
  }
}

</style>
<style lang="less">
.ivu-menu-vertical .ivu-menu-item, 
.ivu-menu-vertical .ivu-menu-submenu-title{
  padding-left:14%!important;
  color:#676B74;
  .ivu-icon{
    margin-right:12px;
  }
}

.ivu-menu-vertical .ivu-menu-item:hover .ivu-icon, .ivu-menu-vertical .ivu-menu-submenu-title:hover .ivu-icon,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) .ivu-icon{
  color:#2d8cf0!important;
}

</style>
